<template>
  <div>
    <!-- 头部开始 -->
    <van-nav-bar class="header-nav-bar" title="登录">
      <i slot="left" class="toutiao toutiao-zuojiantou"  @click="$router.back()"></i>
    </van-nav-bar>
    <!-- 头部结束 -->
    <!-- 手机号验证码开始 -->
    <van-form ref="verificationForm">
      <van-field
        v-model="loginForm.mobile"
        placeholder="请输入用户名"
        :rules="loginRules.mobile"
        type="number"
        name="mobile"
        maxlength="11"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="loginForm.code"
        :rules="loginRules.code"
        placeholder="请输入验证码"
        type="number"
        maxlength="6"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-count-down
            :time="time"
            format="ss 秒"
            @finish="verificationFinish"
            v-if="isCountDownShow"
          />
          <van-button
            size="small"
            type="primary"
            class="Send-code"
            @click="send"
            v-else
            native-type="button"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          class="btn"
          @click="register"
          >登录</van-button
        >
      </div>
    </van-form>
    <!-- 手机号验证码结束 -->
  </div>
</template>

<script>
import { login, sendVerification } from '@/api/login/index.js'
export default {
  data () {
    return {
      time: 60 * 1000,
      isCountDownShow: false,
      loginForm: {
        mobile: '',
        code: ''
      },
      // 验证规则
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号' }, // 必须传入
          { pattern: /^1\d{10}$/, message: '手机号不符合规则' }
        ],
        code: [
          { required: true, message: '请输入验证码' }, // 必须传入
          { pattern: /^\d{6}$/, message: '验证码错误' }
        ]
      }
    }
  },
  // 当页面加载完毕时的钩子
  mounted () {
    console.log(this.$store.state.userToken)
  },
  methods: {
    // 点击登录时触发
    register: async function () {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true
      })
      try {
        const userToken = await login(this.loginForm)
        // 把值存储到Vuex容器里
        this.$store.commit('addToken', userToken.data.data)
        // 成功提示
        // 因为全局引入了Vant 他的组件需要用this.$小写开头的组件名
        this.$toast.success('登录成功')
        this.$router.push('/home/my')
      } catch (error) {
        if (error.response.status === 400) {
          this.$toast.success('登录失败')
        }
      }
    },
    // 发送验证码
    send: async function () {
      // 验证手机号是否输入并正确 validate('表单的name值')
      try {
        await this.$refs.verificationForm.validate('mobile')
      } catch (error) {
        return console.log(error)
      }
      this.isCountDownShow = true
      try {
        // 发送验证
        await sendVerification(this.loginForm.mobile)
        this.$toast.success('发送验证码成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 触发验证码倒计时
    verificationFinish: function () {
      this.isCountDownShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.toutiao-shouji,
.toutiao-yanzhengma {
  font-size: 37px;
  color: #666666;
}
.toutiao-zuojiantou{
  font-size: 30px;
  color: #fff;
}
.btn {
  width: 694px;
  height: 88px;
  background-color: #6db4fb;
  border-radius: 10px;
}
.Send-code {
  widows: 152px;
  height: 46px;
  background-color: #ededed;
  border-radius: 23px;
  font-size: 22px;
  color: #666666;
  border: none;
}
</style>
